<template>
<div class="edit">
  <el-input placeholder="请输入原密码" v-model="oldPassword" show-password class="old-input"></el-input>
  <el-input placeholder="请输入新密码" v-model="newPassword" show-password class="new-input"></el-input>
  <el-input placeholder="确认密码" v-model="repeatPassword" show-password class="repeat-input"></el-input>
  <el-button type="primary" round @click="commit" class="commit">提交</el-button>
</div>

</template>

<script>

export default {
  name: 'index',
  data () {
    return {
      name: '',
      oldPassword: '',
      newPassword: '',
      repeatPassword: ''
    }
  },
  methods: {
    commit: function () {
      if (this.oldPassword.length === 0 || this.newPassword.length === 0 || this.repeatPassword.length === 0) {
        this.$warnInfo('密码不能为空')
      } else if (this.oldPassword.length < 6 || this.newPassword.length < 6 || this.repeatPassword.length < 6) {
        this.$warnInfo('密码不能少于6位')
      } else if (this.newPassword !== this.repeatPassword) {
        this.$errorInfo('密码不一致')
      } else {
        const password = {
          name: sessionStorage.getItem('oldPassword'),
          oldPassword: this.oldPassword,
          newPassword: this.newPassword
        }
        this.$api.setting.update(password).then((response) => {
          if (response.code === 200) {
            // this.$successInfo(response.message)
            sessionStorage.removeItem('oldPassword')
            // this.$router.push({ path: '/login' })
            this.$fInfo('密码修改成功,请重新登录！')
          } else {
            this.$errorInfo(response.message)
          }
        }).catch((error) => {
          console.log(error)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.edit{
  margin: 100px auto;
  width: 400px;
  height: 400px;
  box-shadow: 0 0  20px dodgerblue;
  background: #fcf9f9;
  position: relative;
  .old-input{
    position: absolute;
    top: 80px;
    left: 90px;
    width: 220px;
  }
  .new-input{
    position: absolute;
    top: 140px;
    left: 90px;
    width: 220px;
  }
  .repeat-input{
    position: absolute;
    width: 220px;
    top: 200px;
    left: 90px;
  }
  .commit{
    position: absolute;
    bottom: 50px;
    left: 90px;
    width: 220px;
  }
}
</style>
